<template>
  <!-- 密码框输入 -->
  <div class="payment-code">
    <div v-for="(item, index) in list" :key="index" class="payment-code_input">
      <input
        autofocus
        autocomplete="new-password"
        maxlength="1"
        :disabled="disabled"
        :type="type"
        @input="(e) => onInputChange(e, index)"
        @keydown="(e) => onInputKeydown(e, index)"
        :value="list[index].value"
        lass="el-input__inner"
        :id="`input-${prop}`"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, computed, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { deepClone } from "@/utils/index";
import { useTrigger } from "@/hooks/useValidatorRules.js";
const emits = defineEmits(["update:modelValue"]);
const { emitTrigger } = useTrigger();

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  prop: {
    type: String,
    default: "",
  },
  disabled:{
    type: Boolean,
    default: false
  },
  // text 数字  password 密码
  type: {
    type: String,
    default: "text",
  },
});
const valueKes = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
const list = computed({
  get: () => {
    const items = [];
    const data = deepClone(props.modelValue.split(""));
    if (data.length > 0) {
      for (let i = 0; i < data.length; i++) {
        items.push({
          value: data[i],
        });
      }
    }
    for (let i = 0; i < 6 - data.length; i++) {
      items.push(
        deepClone({
          value: "",
        })
      );
    }
    return items;
  },
  set: (data) => {
    emits("update:modelValue", data.map((x) => x.value).join(""));
    emitTrigger();
  },
});

const onInputChange = (e, index) => {
  if (e.data && valueKes.includes(e.data)) {
    setKeysValue(index, e.data);
  } else {
    setKeysValue(index, "");
  }
};
const onInputKeydown = (e, index) => {
  if (valueKes.includes(e.key)) {
    setKeysIndex(index + 1);
  } else if (e.key === "Backspace") {
    setKeysIndex(index - 1);
  }
};
const setKeysValue = (index, data) => {
  const items = deepClone(list.value);
  items[index].value = data;
  list.value = items;
  proxy.$forceUpdate();
};

const setKeysIndex = (index) => {
  const inputs = document.querySelectorAll(`#input-${props.prop}`);
  if (index >= 0 && index <= 5) {
    setTimeout(() => {
      inputs[index].focus();
    });
  }
  proxy.$forceUpdate();
};
</script>
<style lang="less" scoped>
input[type="password"]::-ms-reveal {
  display: none;
}
input[type="password"]::-ms-clear {
  display: none;
}
input[type="password"]::-o-clear {
  display: none;
}

.payment-code {
  display: flex;
  align-items: center;
  .payment-code_input:first-child {
    border-radius: 5px 0px 0px 5px;
  }
  .payment-code_input:last-child {
    border-radius: 0px 5px 5px 0px;
    border-right: 1px solid #eaeaea;
  }
  .payment-code_input {
    flex: 1;
    background: #ffffff;
    border-top: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    width: 51px;
    height: 51px;
    font-size: 24px;
    font-weight: 400;
    color: #636363;
    display: flex;
    justify-content: center;
    align-items: center;
    input {
      width: 100%;
      height: 100%;
      font-size: 24px;
      text-align: center;
      border: 0px;
      outline: none;
    }
  }
}
</style>
